<template>
	<view class="contract_page">
		<view class="contract_contract" v-html="contractText">

		</view>
		<view class="contract_foobtn">
			<text @click="returnPage">暂不考虑</text>
			<text @click="joinNow">立即加盟</text>
		</view>
		<!-- 遮罩层 -->
		<view class="select_type" v-show="isShowSelectType" @click="downSelectType(0)">
			<view class="select_type_item">

				<AreaSelect @changeSelect='changeSelect' :areaListQuantity='areaListQuantity' :areaListAll='areaListAll' :gencyArea='gencyArea'
				 :options='areaList' :cityList='cityList'></AreaSelect>

				<!-- 已选择的内容 -->
				<view class="select_cont"> 
				</view>
				<view class="select_xz">
					<text @click.stop="downSelectType(0)">取消</text>
					<text @click.stop="downSelectType(1)">确定</text>
				</view>
			</view>
		</view>

	</view>



</template>

<script>
	import AreaSelect from '../../../components/area-select/area-select.vue'
	import {
		getElectronicContract,
		getAgencyArea,
		getAgencyCity,
		getAgencyCounty,
		getAgencyCommunity,
		createProxyOrder
	} from '@/api/user'
	export default {
		components: {
			AreaSelect
		},
		data() {
			return {
				id: '',
				areaListQuantity: 1,
				contractText: '',
				isShowSelectType: false,
				isGetAgencyArea: true,
				gencyArea: ['选择省份', '选择市级', '选择区/县', '选择社区'],
				// 重新选择后默认值
				gencyAreas: ['选择省份', '选择市级', '选择区/县', '选择社区'],
				// gencyArea:'选择省份',
				areaListAll: [],
				// 省份
				areaList: [],
				// 市区
				cityList: [],
				// 区/县
				countyList: [],
				// 社区
				community: [],
				proxyOrder: []
			};
		},
		onLoad({
			id,
			num
		}) {
			this.id = id
			this.areaListQuantity = +num 
		},
		onShow() {
			// 获取合同详情
			this.getElectronicContract() 
			
		},
		methods: {
			// 获取省级
			getAgencyArea(type, index) {
				let that = this
				if (that.isGetAgencyArea || type === 'reset') {
					getAgencyArea(this.id).then(res => {
						if (res.status == 200) {
							// 获取的有数据并且不是重复的数据
							if (res.data.result.length > 0) {
								that.areaList = that.replaceArr(res.data.result)
								that.isGetAgencyArea = false
								that.areaListAll.push(that.areaList)
							} else {
								this.$util.Tips({
									title: '该区域暂无数据'
								})
							}
						}
					})
				}
			},
			// 获取市级数据
			getAgencyCity(id, cityid, index) {
				getAgencyCity(this.id, cityid).then(res => {
					if (res.status == 200) {
						// 每次添加数据之前先清空下面的数据
						this.areaListAll.splice(index + 1, 6)
						// 如果数据存在并且 不相等 进行数据push
						if (res.data.result.length > 0 && !this.isArrEqual(this.areaListAll[index + 1], this.replaceArr(res.data.result))) {

							this.gencyArea[index + 1] = this.gencyAreas[index + 1]
							this.cityList = this.replaceArr(res.data.result)
							this.areaListAll.push(this.cityList)
						} else if (res.data.result.length == 0) {
							this.$util.Tips({
								title: '该区域暂无数据'
							})
						}
					}
				})
			},
			// 获取区县数据
			getAgencyCounty(id, countyId, index) {
				getAgencyCounty(id, countyId).then(res => {
					if (res.status == 200) {
						// 每次添加数据之前先清空下面的数据
						this.areaListAll.splice(index + 1, 6)
						if (res.data.result.length > 0 && !this.isArrEqual(this.areaListAll[index + 1], this.replaceArr(res.data.result))) {
							this.gencyArea[index + 1] = this.gencyAreas[index + 1]
							this.countyList = this.replaceArr(res.data.result)
							this.areaListAll.push(this.countyList)
						} else if (res.data.result.length <= 0) {
							this.$util.Tips({
								title: '该区域暂无数据'
							})
						}
					}
				})
			},
			// 社区数据
			getAgencyCommunity(id, communityId, index) {
				getAgencyCommunity(id, communityId).then(res => {
					if (res.status == 200) {
						// 每次添加数据之前先清空下面的数据
						this.areaListAll.splice(index + 1, 6)
						if (res.data.result.length > 0 && !this.isArrEqual(this.areaListAll[index + 1], this.replaceArr(res.data.result))) {
							this.gencyArea[index + 1] = this.gencyAreas[index + 1]
							this.areaListAll.push(res.data.result)
						} else if (res.data.result <= 0) {
							this.$util.Tips({
								title: '该区域暂无数据'
							})
						}
					}
				})
			},

			// 获取合同详情
			getElectronicContract() {
				let that = this
				getElectronicContract(that.id).then(res => {
					if(res.status == 400){
						setTimeout(() => {
							uni.navigateTo({
								url:'../../users/user_info/index'
							})
						},1000)
						return that.$util.Tips({
							title: '请先上传微信二维码'
						});
					}
					if (res.data.status == 200) { 
						that.contractText = res.data.result
					}else{
						uni.showModal({
							title:'温馨提示',
							content: res.msg,
							success(res) { 
								if(res.confirm){
									uni.navigateTo({
										url:'../../users/user_info/index'
									})
								}else{
									uni.switchTab({
										url:'../../index/index'
									})
								} 
							}
						})
					}
				}).catch(err => {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
					return that.$util.Tips({
						title: '无数据'
					});
				})
			},
			// 返回上一页
			returnPage() {
				uni.redirectTo({
					url: '../cooperation'
				})
			},
			// 立即加盟
			joinNow() {
				this.isShowSelectType = !this.isShowSelectType
				// 获取省级数据
				this.getAgencyArea()
			},
			// 重置数据
			resetSelect() {
				this.areaListAll = []
				// 获取省级数据
				this.getAgencyArea('reset')
			},
			// 关闭弹框
			downSelectType(type) {
				// 点击了确定按钮
				if (type) {
					console.log(this.id)
					switch (this.areaListQuantity) {
						case 1:
							this.gencyArea[0] == '选择省份' ? this.$util.Tips({
								title: '请选择省份'
							}) : this.createProxyOrder(this.id, this.cityid)
							break
						case 2:
							this.gencyArea[0] == '选择省份' || this.gencyArea[1] == '选择市级' ? this.$util.Tips({
								title: '有区域未选择'
							}) : this.createProxyOrder(this.id, this.cityid)
							break
						case 3:
							this.gencyArea[0] == '选择省份' || this.gencyArea[1] == '选择市级' || this.gencyArea[2] == '选择区/县' ? this.$util.Tips({
								title: '有区域未选择'
							}) : this.createProxyOrder(this.id, this.cityid)
							break
						case 4:
							this.gencyArea[0] == '选择省份' || this.gencyArea[1] == '选择市级' || this.gencyArea[2] == '选择区/县' || this.gencyArea[3] ==
								'选择社区' ? this.$util.Tips({
									title: '有区域未选择'
								}) : this.createProxyOrder(this.id, this.cityid)
							break
					}
				} else {
					// 取消按钮
					this.isShowSelectType = false
				}
			},
			changeSelect(options, index) {
				// 省级区域 已被代理提示
				if (options.is_proxy === 1) {
					this.$util.Tips({
						title: '该区域已被代理'
					})
					return
				}
				this.cityid = options.id
				this.gencyArea[index] = options.label

				if ((this.areaListQuantity == 2 || this.areaListQuantity == 3 || this.areaListQuantity == 4) && index == 0) {
					this.getAgencyCity(this.id, options.id, index)
				} else if (this.areaListQuantity == 2 && index == 1) {
					// this.getAgencyCounty(this.id, options.id)  
				} else if (this.areaListQuantity == 3 && index == 1) {
					this.getAgencyCounty(this.id, options.id, index)
				} else if (this.areaListQuantity == 4 && index == 1) {
					this.getAgencyCounty(this.id, options.id, index)
				} else if (this.areaListQuantity == 4 && index == 2) {
					this.getAgencyCommunity(this.id, options.id, index)
				}
			},
			// 替换数组
			replaceArr(data) {
				let newData = JSON.parse(JSON.stringify(data));
				for (let i = 0; i < newData.length; i++) {
					newData[i].is_proxy && (newData[i].label = newData[i].label + ' (已被代理)')
				}
				return newData
			},
			// 判断数组是否相等
			isArrEqual(newArr, oldArr) {
				return JSON.stringify(newArr) === JSON.stringify(oldArr)
			},
			// 生成订单
			createProxyOrder(area_id, level_id) {
				createProxyOrder(area_id, level_id).then(res => {
					if (res.data.status == 200) {
						uni.setStorageSync('proxyOrder', res.data.result)
						uni.navigateTo({
							url: '../cooperPay/index?num='+ this.areaListQuantity + '&id=' + this.id
						})
					} else {
						this.$util.Tips({
							title: res.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.contract_page { 

		.contract_contract {
			height: 90vh;
			overflow: auto;
			padding: 10rpx;
			line-height: 40rpx;
		}

		.contract_foobtn {
			position: fixed;
			bottom: 30rpx;
			width: 100%;
			display: flex;
			height: 80rpx;
			text-align: center;
			color: #fff;
			line-height: 80rpx;

			text {
				margin: 0 30rpx;
				flex: 1;
				background: #22ac38;
				border-radius: 20rpx;
			}

			& text:nth-child(1) {
				background-image: linear-gradient(to right, #f62c2c, #f96829);
			}
		}

		.select_type {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);

			.select_type_item {
				padding: 40rpx 20rpx;
				position: fixed;
				z-index: 100;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				border-radius: 20rpx;
				background-color: #f5f5f5;
			}

			.select_cont {
				position: relative;
				min-height: 400rpx;
				font-size: 34rpx;
				line-height: 100rpx;

				.select_cz {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					width: 100rpx;
					text-align: center;
					line-height: 40rpx;
					font-size: 26rpx;

					.select_cz_img {
						display: block;
						margin: 0 auto;
						width: 60rpx;
						height: 60rpx;
					}
				}
			}

			.select_xz {
				width: 100%;
				display: flex;

				text {
					flex: 1;
					margin: 0 20rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 20rpx;
					color: #fff;
					background-image: linear-gradient(to right, #f62c2c, #f96829);
				}

				& text:last-child {
					background: #22ac38;
				}
			}
		}

	}
</style>
